<template>
  <div id="app">
    <div class="common_header" >
      <div class="common_header_left">
        <ul>
          <li >
            <!--<router-link to="/HomeList" active-class="active">首页</router-link>-->
            <a href="/" active-class="active">首页</a>
          </li>
          <li  style="display: none" v-show="userName">
            <router-link to="/HomeList/" active-class="active">列表</router-link>
          </li>
          <li style="display: none" v-show="userName">
            <router-link to="/e/" active-class="active">编辑</router-link>
          </li>
          <!--<li >-->
            <!--&lt;!&ndash;<router-link to="/p/wiki_1562657004886" active-class="active">正文</router-link>&ndash;&gt;-->
            <!--<router-link to="/tools/" active-class="active">在线工具</router-link>-->
          <!--</li>-->
          <!--<li>-->
            <!--<a href="/proverb/" active-class="active">谚语杂记</a>-->
          <!--</li>-->
          <!--<li>-->
            <!--<a href="/s/" active-class="active">本站源码</a>-->
          <!--</li>-->
        </ul>
      </div>
      <div class="common_header_right">
        <input class="search" type="input" v-model="searchKey" @keyup.enter="searchWiki(searchKey)"/>
        <span >
            <i class="iconfont iconchazhao" @click="searchWiki(searchKey)"></i>
          </span>
        <span>&nbsp;</span>
        <span> {{userName?userName:'南星'}} </span>
        <span style="display: none" v-show="userName" @click="logout()">
             &nbsp;|&nbsp;注销
       </span>
      </div>
    </div>
    <!--<img src="./assets/logo.png">-->
    <div class="common-content">
      <router-view @userSignIn="userSignIn"> </router-view>
    </div>
    <div class="footer">
      <div class="copyr" style="color: #ffd100">
        友情链接：
        <a href="https://www.zzpython.com/" target="view_window" style="color: #eaeaea;text-decoration:none;">编程人生</a>
        |
        <a href="http://www.16boke.com/article" target="view_window" style="color: #eaeaea;text-decoration:none;">一路博客</a>
        |
        <a href="https://www.csdn.net/" target="view_window" style="color: #eaeaea;text-decoration:none;">CSDN</a>
      </div>
      <div class="">
        Copyright © nanstar.top&emsp;|&emsp;
        <a href="http://www.beian.miit.gov.cn/" target="view_window" style="color: #00bb78;text-decoration:none;">京ICP备19038079号</a>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      isSelect: '首页',
      userName: sessionStorage.userName,
      searchKey: ''
    }
  },
  mounted () {
    this.isSelect = this.$route.name
    this.refreshLoginStatus()
  },
  methods: {
    // 子组件(register)将用户名传过来
    userSignIn (userName) {
      sessionStorage.userName = userName
      this.userName = sessionStorage.userName
    },
    // 注销
    logout () {
      var that = this
      this.$http.post(process.env.REST_URL + 'user/logout', {}, { credentials: true }).then((res) => {
        this.submitting = 0
        if (res.data.status === 0) {
          sessionStorage.removeItem('userName')
          that.userName = ''
          console.log('logout')
        } else {
          alert(res.data.msg)
          console.log(res.data.msg)
        }
      }, function (response) {
        this.submitting = 0
        alert('logout error')
        console.log('error')
      })
    },
    // 刷新登录状态
    refreshLoginStatus () {
      var that = this
      // this.$http.post(process.env.REST_URL + 'user/isLogin', {}, { credentials: true }).then((res) => {
      this.$http.post(process.env.REST_URL + 'user/isLogin', {}).then((res) => {
        this.submitting = 0
        if (res.data.status === 1) {
          sessionStorage.removeItem('userName')
          that.userName = ''
          console.log('logout')
        } else if (res.data.status === 0) {
          this.userSignIn(res.data.username)
        }
      }, function (response) {
        this.submitting = 0
        console.log('refreshLoginStatus error')
      })
    },
    // 检索
    searchWiki (searchKey) {
      console.log('search')
      this.$router.push({name: 'searchList', query: {skey: searchKey}})
      // this.$router.go(0)
    }
  }
}
</script>

<style scoped>
  #app {
    position: relative;
    /*min-height: 650px;*/
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: olivedrab;
    background: #fafafa;
  }
  .common-content{
    padding-bottom: 60px;
    min-height: 300px;
  }
  .footer{
    color: #ff0011;
    background: #333333;
    font-size: 14px;
    /*margin-top: 20px;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1px;
    bottom: 0;
    width: 100%;
    height: 100px;
    /*position: absolute;*/
    display: block;
  }
  .copyr{
    margin-top: 25px;
  }
  .search{
    /*width: 50%;*/
    background: lightslategrey;
    border: 0px none transparent;
    outline:none;
    height: 25px;
    /*line-height: 50%;*/
    /*padding: 0px 10px;*/
    text-align: left;
    /*font-size: 30px;*/
    /*margin-bottom: 10px;*/
    /*margin-top: 10px;*/
  }
</style>
<style lang="less" scoped>
  .common_header{
    position: relative;
    height: 50px;
    /*width: 100%;*/
    background-color: #2c3e50;
    padding: 0 16px 0 72px;
    margin: 0 0 15px 0;
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.12), 0 6px 20px 0 rgba(0,0,0,.14);
    .common_header_left{
      display: inline;
      float: left;
      height: 50px;
      width: 60%;
      ul{
        height: 50px;
        margin: 0 0 15px 0;
        font-size:15px;
        overflow: hidden;
        list-style:none;
        li{
          float: left;
          margin-right: 23px;
          /*height: 100%;*/
          text-align: center;
          cursor: pointer;
          padding: 0.15rem 0 0.13rem 0;
          a{
            font-size: 1em;
            color: #7f7f7f;
            text-decoration: none;
            line-height: 50px;
            /*display: inline-table;*/
          }
          .active{
            color: #ffd100;
          }
        }
      }
    }
    .common_header_right {
      display: inline;
      /*height: 50px;*/
      width: 30%;
      float: right;
      /*position: fixed;*/
      /*top: 0;*/
      /*font-size: 1em;*/
      color: #7f7f7f;
      line-height: 50px;
      /*z-index: 1000;*/
      /*background-color: black;*/
      /*left: 90%;*/
    }
  }
</style>
